<template>
    <div class="sakura-spinner">
        <div class="petal" v-for="(petal, index) in petals" :key="index" :style="petal.style"></div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const petals = ref([])
const petalCount = 5 // 花瓣数量

onMounted(() => {
    // 初始化花瓣位置和样式
    for (let i = 0; i < petalCount; i++) {
        const angle = (i * (360 / petalCount)) + 15 // 15度偏移使更像樱花
        const delay = i * 0.1

        petals.value.push({
            style: {
                transform: `rotate(${angle}deg) translateY(-40px)`,
                animationDelay: `${delay}s`,
                backgroundColor: `hsl(${330 + i * 5}, 70%, 75%)` // 粉色系渐变
            }
        })
    }
})
</script>

<style scoped>
.sakura-spinner {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

.petal {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 25px;
    margin-left: -7.5px;
    margin-top: -12.5px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: spin 2s infinite ease-in-out;
    transform-origin: center -40px;
}

@keyframes spin {

    0%,
    100% {
        transform: rotate(0deg) translateY(-40px) scale(1);
        opacity: 1;
    }

    50% {
        transform: rotate(180deg) translateY(-40px) scale(0.8);
        opacity: 0.7;
    }
}
</style>